<template>
    <div class="order">
      <!-- 我的订单头部 -->
      <div class="order-header">
        <div class="order-header-content">
          <p>
            <i class="el-icon-s-order" style="font-size: 30px;color: #ff6700;"></i>
            我的订单
          </p>
        </div>
      </div>
      <!-- 我的订单头部END -->
  
      <!-- 我的订单主要内容 -->
      <div class="order-content" v-if="orders.length>0">
        <div class="content" v-for="(item,index) in orders" :key="index">
          <div>
            <!-- 我的订单表头 -->
            <li class="order-info">
              <div class="order-id">订单编号: {{item[0].order_id}}</div>
              <div class="order-time">订单时间: {{dateFormat(item[0].order_time)}}</div>
            </li>
            <li class="header">
              <div class="pro-img"></div>
              <div class="pro-name">商品名称</div>
              <div class="pro-price">单价</div>
              <div class="pro-num">数量</div>
              <div class="pro-total">小计</div>
            </li>
            <!-- 我的订单表头END -->
  
            <!-- 订单列表 -->
            <li class="product-list" v-for="(product,i) in item" :key="i">
              <div class="pro-img">
                <router-link :to="{ path: '/productsellpage', query: {id:product.product_id} }">
                  <img :src="`http://localhost:3001/${product.product_picture}`" />
                </router-link>
              </div>
              <div class="pro-name">
                <router-link
                  :to="{ path: '/productsellpage', query: {id:product.product_id} }"
                >{{product.product_name}}</router-link>
              </div>
              <div class="pro-price">{{product.product_price}}元</div>
              <div class="pro-num">{{product.product_num}}</div>
              <div class="pro-total pro-total-in">{{product.product_price*product.product_num}}元</div>
            </li>
          </div>
           <div class="order-bar">
            <div class="order-bar-left">
              <span class="order-total">
                共
                <span class="order-total-num">{{total[index].totalNum}}</span> 件商品
              </span>
            </div>
            <div class="order-bar-right">
              <span>
                <span class="total-price-title">合计：</span>
                <span class="total-price">{{total[index].totalPrice}}元</span>
              </span>
            </div>
          
          </div>
        </div> 
        <div style="margin-top:-40px;"></div>
      </div>
      <!-- 我的订单主要内容END -->
  
      <!-- 订单为空的时候显示的内容 -->
      <div v-else class="order-empty">
        <div class="empty">
          <h2>您的订单还是空的！</h2>
          <p>快去购物吧！</p>
        </div>
      </div>
      <!-- 订单为空的时候显示的内容END -->
    </div>
  </template>

<script setup>
    import { useStore } from 'vuex'
    import { getorderApi } from '../../api/goods'
    import { reactive, ref } from 'vue';
    const store = useStore() 
    const orders = ref([])
    const total = ref([]

    )
    const getorder = async()=>{
        let data = await getorderApi(store.state.user.user_id)
        console.log(data)
        orders.value = data.orders
        let totals = [];
      for (let i = 0; i < orders.value.length; i++) {
        const element = orders.value[i];

        let totalNum = 0;
        let totalPrice = 0;
        for (let j = 0; j < element.length; j++) {
          const temp = element[j];
          totalNum += temp.product_num;
          totalPrice += temp.product_price * temp.product_num;
        }
        totals.push({ totalNum, totalPrice });
      }
      total.value = totals;
    }
    getorder()

    // 相对时间过滤器,把时间戳转换成时间
// 格式: 2020-02-25 21:43:23
const dateFormat = (dataStr) => {
  var time = new Date(dataStr);
  function timeAdd0 (str) {
    if (str < 10) {
      str = '0' + str;
    }
    return str;
  }
  var y = time.getFullYear();
  var m = time.getMonth() + 1;
  var d = time.getDate();
  var h = time.getHours();
  var mm = time.getMinutes();
  var s = time.getSeconds();
  return y + '-' + timeAdd0(m) + '-' + timeAdd0(d) + ' ' + timeAdd0(h) + ':' + timeAdd0(mm) + ':' + timeAdd0(s);
};
</script>

<style scoped>
.order {
  background-color: #f5f5f5;
  padding-bottom: 20px;
}
/* 我的订单头部CSS */
.order .order-header {
  height: 64px;
  border-bottom: 2px solid #ff6700;
  background-color: #fff;
  margin-bottom: 20px;
}
.order .order-header .order-header-content {
  width: 1225px;
  margin: 0 auto;
}
.order .order-header p {
  font-size: 28px;
  line-height: 58px;
  float: left;
  font-weight: normal;
  color: #424242;
}
/* 我的订单头部CSS END */
.order .content {
  width: 1225px;
  margin: 0 auto;
  background-color: #fff;
  margin-bottom: 50px;
}

.order .content  {
  background-color: #fff;
  color: #424242;
  line-height: 85px;
}
/* 我的订单表头CSS */
.order .content  .order-info {
  height: 60px;
  line-height: 60px;
  padding: 0 26px;
  color: #424242;
  border-bottom: 1px solid #ff6700;
}
.order .content  .order-info .order-id {
  float: left;
  color: #ff6700;
}
.order .content .order-info .order-time {
  float: right;
}

.order .content  .header {
  height: 85px;
  padding-right: 26px;
  color: #424242;
}
/* 我的订单表头CSS END */

/* 订单列表CSS */
.order .content  .product-list {
  height: 85px;
  padding: 15px 26px 15px 0;
  border-top: 1px solid #e0e0e0;
}
.order .content  .pro-img {
  float: left;
  height: 85px;
  width: 120px;
  padding-left: 80px;
}
.order .content  .pro-img img {
  height: 80px;
  width: 80px;
}
.order .content  .pro-name {
  float: left;
  width: 380px;
}
.order .content  .pro-name a {
  color: #424242;
}
.order .content  .pro-name a:hover {
  color: #ff6700;
}
.order .content  .pro-price {
  float: left;
  width: 160px;
  padding-right: 18px;
  text-align: center;
}
.order .content  .pro-num {
  float: left;
  width: 190px;
  text-align: center;
}
.order .content  .pro-total {
  float: left;
  width: 160px;
  padding-right: 81px;
  text-align: right;
}
.order .content  .pro-total-in {
  color: #ff6700;
}

.order .order-bar {
  width: 1185px;
  padding: 0 20px;
  border-top: 1px solid #ff6700;
  height: 50px;
  line-height: 50px;
  background-color: #fff;
}
.order .order-bar .order-bar-left {
  float: left;
}
.order .order-bar .order-bar-left .order-total {
  color: #757575;
}
.order .order-bar .order-bar-left .order-total-num {
  color: #ff6700;
}
.order .order-bar .order-bar-right {
  float: right;
}
.order .order-bar .order-bar-right .total-price-title {
  color: #ff6700;
  font-size: 14px;
}
.order .order-bar .order-bar-right .total-price {
  color: #ff6700;
  font-size: 30px;
}
/* 订单列表CSS END */

/* 订单为空的时候显示的内容CSS */
.order .order-empty {
  width: 1225px;
  margin: 0 auto;
}
.order .order-empty .empty {
  height: 300px;
  padding: 0 0 130px 558px;
  margin: 65px 0 0;
  background: url(../assets/imgs/cart-empty.png) no-repeat 124px 0;
  color: #b0b0b0;
  overflow: hidden;
}
.order .order-empty .empty h2 {
  margin: 70px 0 15px;
  font-size: 36px;
}
.order .order-empty .empty p {
  margin: 0 0 20px;
  font-size: 20px;
}
/* 订单为空的时候显示的内容CSS END */
</style>